<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        button:hover {
            background-color: #0056b3;
        }
        .btn-success {
            background-color: #28a745;
        }
        .btn-success:hover {
            background-color: #218838;
        }
        .btn-danger {
            background-color: #dc3545;
        }
        .btn-danger:hover {
            background-color: #c82333;
        }
        .result {
            margin-top: 20px;
            padding: 10px;
            border-radius: 4px;
        }
        .success {
            background-color: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }
        .error {
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }
        .file-list {
            margin-top: 10px;
        }
        .file-item {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
            padding: 5px;
            background-color: #f8f9fa;
            border-radius: 4px;
        }
        .file-item button {
            margin-left: 10px;
            padding: 2px 8px;
            font-size: 12px;
        }
        .progress {
            width: 100%;
            height: 20px;
            background-color: #f0f0f0;
            border-radius: 10px;
            overflow: hidden;
            margin-top: 10px;
        }
        .progress-bar {
            height: 100%;
            background-color: #007bff;
            width: 0%;
            transition: width 0.3s ease;
        }
    </style>
</head>
<body>
    <h1>文件上传测试</h1>

    <!-- 单个文件上传 -->
    <div class="container">
        <h2>单个文件上传</h2>
        <form id="singleUploadForm">
            <div class="form-group">
                <label for="singleFile">选择文件:</label>
                <input type="file" id="singleFile" name="file" accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx" required>
            </div>
            <div class="form-group">
                <label for="singleKey">自定义Key (可选):</label>
                <input type="text" id="singleKey" name="key" placeholder="留空使用自动生成的Key">
            </div>
            <button type="submit" class="btn-success">上传单个文件</button>
        </form>
        <div id="singleResult"></div>
    </div>

    <!-- 批量文件上传 -->
    <div class="container">
        <h2>批量文件上传</h2>
        <form id="batchUploadForm">
            <div class="form-group">
                <label for="batchFiles">选择多个文件:</label>
                <input type="file" id="batchFiles" name="files" multiple accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx" required>
            </div>
            <div id="fileList" class="file-list"></div>
            <button type="submit" class="btn-success">批量上传文件</button>
        </form>
        <div id="batchResult"></div>
    </div>

    <!-- 测试接口 -->
    <div class="container">
        <h2>接口测试</h2>
        <button onclick="testApi()" class="btn-success">测试API连接</button>
        <button onclick="getToken()" class="btn-success">获取上传Token</button>
        <div id="testResult"></div>
    </div>

    <script>
        const API_BASE = '/api/FileUpload';

        // 显示结果
        function showResult(elementId, message, isSuccess = true) {
            const resultDiv = document.getElementById(elementId);
            resultDiv.innerHTML = `<div class="result ${isSuccess ? 'success' : 'error'}">${message}</div>`;
            setTimeout(() => {
                resultDiv.innerHTML = '';
            }, 5000);
        }

        // 显示文件列表
        function displayFileList() {
            const fileInput = document.getElementById('batchFiles');
            const fileList = document.getElementById('fileList');
            fileList.innerHTML = '';

            if (fileInput.files.length > 0) {
                for (let i = 0; i < fileInput.files.length; i++) {
                    const file = fileInput.files[i];
                    const fileItem = document.createElement('div');
                    fileItem.className = 'file-item';
                    fileItem.innerHTML = `
                        <span>${file.name} (${(file.size / 1024).toFixed(2)} KB)</span>
                        <button type="button" onclick="removeFile(${i})" class="btn-danger">移除</button>
                    `;
                    fileList.appendChild(fileItem);
                }
            }
        }

        // 移除文件
        function removeFile(index) {
            const fileInput = document.getElementById('batchFiles');
            const dt = new DataTransfer();
            
            for (let i = 0; i < fileInput.files.length; i++) {
                if (i !== index) {
                    dt.items.add(fileInput.files[i]);
                }
            }
            
            fileInput.files = dt.files;
            displayFileList();
        }

        // 单个文件上传
        document.getElementById('singleUploadForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const fileInput = document.getElementById('singleFile');
            const keyInput = document.getElementById('singleKey');
            
            if (!fileInput.files[0]) {
                showResult('singleResult', '请选择文件', false);
                return;
            }

            const formData = new FormData();
            formData.append('file', fileInput.files[0]);
            
            if (keyInput.value.trim()) {
                formData.append('key', keyInput.value.trim());
            }

            try {
                const response = await fetch(`${API_BASE}/upload?key=${encodeURIComponent(keyInput.value.trim())}`, {
                    method: 'POST',
                    body: formData
                });

                const result = await response.json();
                
                if (result.success) {
                    showResult('singleResult', `上传成功: ${result.message}<br>文件URL: ${result.url}<br>文件Key: ${result.key}<br>文件大小: ${(result.size / 1024).toFixed(2)} KB`);
                    e.target.reset();
                } else {
                    showResult('singleResult', `上传失败: ${result.message}`, false);
                }
            } catch (error) {
                showResult('singleResult', `请求失败: ${error.message}`, false);
            }
        });

        // 批量文件上传
        document.getElementById('batchUploadForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const fileInput = document.getElementById('batchFiles');
            
            if (fileInput.files.length === 0) {
                showResult('batchResult', '请选择文件', false);
                return;
            }

            const formData = new FormData();
            
            for (let i = 0; i < fileInput.files.length; i++) {
                formData.append('files', fileInput.files[i]);
            }

            try {
                const response = await fetch(`${API_BASE}/upload-batch`, {
                    method: 'POST',
                    body: formData
                });

                const results = await response.json();
                
                let successCount = 0;
                let failCount = 0;
                let resultHtml = '<h3>上传结果:</h3>';
                
                results.forEach((result, index) => {
                    if (result.success) {
                        successCount++;
                        resultHtml += `<div class="success">文件 ${index + 1}: 上传成功 - ${result.message}<br>URL: ${result.url}<br>Key: ${result.key}<br>大小: ${(result.size / 1024).toFixed(2)} KB</div>`;
                    } else {
                        failCount++;
                        resultHtml += `<div class="error">文件 ${index + 1}: 上传失败 - ${result.message}</div>`;
                    }
                });
                
                resultHtml += `<br><strong>总计: 成功 ${successCount} 个，失败 ${failCount} 个</strong>`;
                
                document.getElementById('batchResult').innerHTML = resultHtml;
                
                if (successCount > 0) {
                    e.target.reset();
                    document.getElementById('fileList').innerHTML = '';
                }
            } catch (error) {
                showResult('batchResult', `请求失败: ${error.message}`, false);
            }
        });

        // 文件选择事件
        document.getElementById('batchFiles').addEventListener('change', displayFileList);

        // 测试API连接
        async function testApi() {
            try {
                const response = await fetch(`${API_BASE}/test`);
                const result = await response.json();
                showResult('testResult', `API连接成功: ${result.message}`, true);
            } catch (error) {
                showResult('testResult', `API连接失败: ${error.message}`, false);
            }
        }

        // 获取上传Token
        async function getToken() {
            try {
                const response = await fetch(`${API_BASE}/token`);
                const result = await response.json();
                showResult('testResult', `获取Token成功: ${result.token.substring(0, 20)}...`, true);
            } catch (error) {
                showResult('testResult', `获取Token失败: ${error.message}`, false);
            }
        }

        // 页面加载时测试API连接
        window.onload = function() {
            testApi();
        };
    </script>
</body>
</html> 